<template>
	<div class="person">
		<input type="text" placeholder="姓名" v-model="name">
		<input type="text" placeholder="性别" v-model="gender">
		<button @click="handleAdd">添加</button>
		<h3>现在一共有{{newsList.length}}条新闻</h3>
		<ul>
			<li v-for="person in persons" :key="person.id">
				姓名：{{person.name}} --- 性别：{{person.sex}}
			</li>
		</ul>
	</div>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		name:'Person',
		data() {
			return {
				name:'',
				gender:''
			}
		},
		computed:{
			...mapState(['persons','newsList'])
		},
		methods: {
			handleAdd(){
				//获取用户的输入
				const {name,gender} = this
				//包装成一个person对象
				const personObj = {id:Date.now(),name,sex:gender}
				//联系服务员
				this.$store.commit('SAVE_PERSON',personObj)
			}
		},
	}
</script>

<style scoped>
	.person{
		background-color: orange;
		padding: 20px;
	}
</style>